<template>
  <div>
    count is {{ count }}
    <p><button @click="count++">+1</button></p>
  </div>
</template>

<script setup>
import {
  ref,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted
} from 'vue'
const count = ref(0)

console.log('---setup---发请求')

onBeforeMount(() => {
  console.log('---onBeforeMount---视图初次渲染出来之前---')
})

onMounted(() => {
  console.log('---onMounted---视图初次渲染出来之后---')
})

onBeforeUpdate(() => {
  console.log('---onBeforeUpdate---')
})

onUpdated(() => {
  console.log('---onUpdated---')
})

onBeforeUnmount(() => {
  console.log('---onBeforeUnmount---')
})

onUnmounted(() => {
  console.log('---onUnmounted---')
})
</script>
